<template>
  <div>
      <!-- 添加与修改角色 -->
      <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" width="40%">
        <el-form :model="saveForm">
            <el-form-item label="角色名" prop="name" label-width="20%">
                <el-input v-model="saveForm.name" style="width:85%"></el-input>
            </el-form-item>
            <el-form-item label="描述" label-width="20%">
                <el-input v-model="saveForm.desc" style="width:85%"></el-input>
            </el-form-item>
            <el-form-item label="角色状态" prop="status" label-width="20%">
                <el-radio-group v-model="saveForm.status">
                    <el-radio  :label="0">正常</el-radio>
                    <el-radio  :label="1">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateEdit()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 权限 -->
      <el-dialog title="分配权限" :visible.sync="menuDialogFormVisible" width="40%">
        <el-tree
        :default-expand-all=true
        :data="menuList"
        show-checkbox
        node-key="id"
        ref="tree"
        check-strictly
        :props="defaultProps" >
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="menuDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitMenu()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 查询区域 -->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline" style="border:1px solid #DCDFE6;padding: 10px;">
        <el-form-item label="角色名">
            <el-input v-model="queryForm.name" placeholder="请输入角色名"></el-input>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="queryForm.status" placeholder="请选择状态">
            <el-option label="正常" value="0">正常</el-option>
            <el-option label="停用" value="1">停用</el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
       </el-form>
       <!-- 显示区域 -->
       <el-container style="border:1px solid #DCDFE6;padding: 10px;margin-top:10px">
           <el-table
            :data="roles"
            stripe
            style="width: 100%">
            <el-table-column
            label="id"
            width="120">
            <template slot-scope="scope">
                <span >{{ scope.row.id }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="角色名"
            width="180">
            <template slot-scope="scope">
                 <span>{{scope.row.name}}</span>
            </template>
            </el-table-column>
             <el-table-column
            label="描述"
            width="500">
            <template slot-scope="scope">
                 <span>{{scope.row.desc}}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="状态"
            width="180">
            <template slot-scope="scope">
                 <el-tag
                :type="scope.row.status===0 ? 'success' : 'info'"
                disable-transitions>{{scope.row.status===0 ? "正常":"停用"}}</el-tag>
            </template>
            </el-table-column>
            
            <el-table-column label="操作"  width="300">
                <template slot="header">
                    <el-button
                    size="medium"
                    type="primary"
                    plain
                    @click="handleAdd()">添加角色</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="primary"
                    plain
                    @click="handleMenu(scope.$index, scope.row)">分配权限</el-button>
                    <el-popover
                    placement="top"
                    width="160"
                    trigger="click"
                    v-model="scope.row.visible">
                    <p>您确定要删除吗？</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                        <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
                    </div>
                    <el-button 
                    style="margin-left:20px"
                    slot="reference"
                    size="mini"
                    type="danger">删除</el-button>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
       </el-container>
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataSize">
        </el-pagination>
  </div>
</template>

<script>
import Qs from 'qs';
export default {
    data(){
        return{
            formTitle:"",
            menuDialogFormVisible:false,//分配权限窗口是否显示
            dialogFormVisible:false,//添加或编辑窗口是否显示
            dataSize:400,// 数据总数
            queryForm:{//查询表单
                name:"",
                status:"",
                current:1,
                size:10
            },
            saveForm:{//添加或编辑表单

            },
            roles:[{//角色列表
                id:1,
                name:"普通用户",
                desc:"拥有网站部分权限",
                "status":0
                },{
                id:2,
                name:"管理员",
                desc:"拥有网站大部分权限，负责一定系统或者软件的维护或管理更新的实际个人或帐号",
                "status":1
                }
            ],
            //所有被显示是菜单数据
             menuList: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                    id: 9,
                    label: '三级 1-1-1'
                    }, {
                    id: 10,
                    label: '三级 1-1-2'
                    }]
                }]
                }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
                }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
                }],
            defaultProps: {
                children: 'childrenMenus',
                label: 'name'
            },
            roleMenuList:{
                roleId:"",
                menuIds:[]
            }
        }
    },
    created(){
        this.onSubmit();
        this.getMenuList();
    },
    methods:{
        //添加角色
        handleAdd(){
            this.dialogFormVisible =true;
            this.formTitle = "添加角色信息";
            this.saveForm ={status:0};
        },
        //提交查询
        async onSubmit() {
            const res = await this.$http.get("/role/listRolesByPage",{params:this.queryForm})
             if(res.data.code == 200){
                 this.roles=res.data.data.records;
                 this.dataSize =res.data.data.total;
             }else{
                 this.$message.error(res.data.msg);
             }
        },
        // 编辑按钮
        handleEdit(index,row){
            this.dialogFormVisible =true;
            this.formTitle = "修改角色信息";
            this.saveForm =Object.assign({}, row);
        },
        // 提交修改或保存
        async updateEdit(){
            const res = await this.$http.post("/role/saveRole",Qs.stringify(this.saveForm))
            if(res.data.code === 200){
                 this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                this.dialogFormVisible = false;
                // 刷新当前页面
                this.onSubmit();
            }else{
                 this.$message.error(res.data.msg);
            }
        },
        // 权限管理按钮
        async handleMenu(index,row){
            this.roleMenuList.roleId = row.id;
            // 显示权限分配窗口
            this.menuDialogFormVisible = true;
            //查询该用户拥有的权限
             const res = await this.$http.post("/rolemenu/getMenuIdsByRoleId",Qs.stringify({roleId:row.id}))
            if(res.data.code === 200){
                this.$refs.tree.setCheckedKeys(res.data.data);
            }else{
                this.$message.error(res.data.msg);
            }
        },
        //提交权限修改
        async submitMenu(){
            this.roleMenuList.menuIds =this.$refs.tree.getCheckedKeys();
            const res = await this.$http.post("/rolemenu/updateMenuIdsByRoleId",Qs.stringify(this.roleMenuList))
            if(res.data.code === 200){
                 this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                this.menuDialogFormVisible= false;
                // 刷新当前页面
                this.onSubmit();
            }else{
                 this.$message.error(res.data.msg);
            }
        },
        // 删除按钮
        async handleDelete(index,row){
            row.visible = false;
            // 通过删除按钮根据id删除菜单数据
            const res = await this.$http.post("/role/deleteRole",Qs.stringify({id:row.id}))
            if(res.data.code === 200){
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                this.onSubmit();
            }else{
                this.$message.error(res.data.msg);
            }
        },
        // 每叶总数改变
        handleSizeChange(val) {
            this.queryForm.size = val;
            this.onSubmit();
        },
        //当前页
        handleCurrentChange(val) {
            this.queryForm.current = val;
            this.onSubmit();
        },
        // 获取菜单列表
        async getMenuList(){
            const res =await this.$http.get("/menu/getAllMenus")
            if(res.data.code === 200){
                this.menuList = res.data.data;
            }else{
                this.$message.error("获取菜单失败");
                this.$router.replace('/login');
            }
        }
        
    }
}
</script>

<style>

</style>